import React, { useEffect } from "react";
// import { ratedApi } from "../../utils/api";

// todo useSelector, useDispatch用于将仓库的属性和方法映射到组件
import { useSelector, useDispatch } from "react-redux";

const Index = () => {
  const count = useSelector((state) => state.city.count);
  const ratedList = useSelector((state) => state.city.ratedList);
  const dispatch = useDispatch();

  // const [ratedList, setRatedList] = useState([]);
  // useEffect(() => {
  //   (async () => {
  //     const res = await ratedApi({ a: 3, b: 4 });
  //     res && setRatedList(res.result);
  //   })();
  // }, []);

  useEffect(() => {
    dispatch({ type: "takeLoad", payload: { a: 3 } });
    // eslint-disable-next-line
  }, [dispatch]);

  return (
    <>
      <button onClick={() => dispatch({ type: "takeMinus" })}>+</button>
      <p>{count}</p>
      <button onClick={() => dispatch({ type: "takeAdd", num: 2 })}>+</button>
      <hr />
      <div>这是城市选择页</div>
      {ratedList.map((item) => (
        <div key={item._id}>{item.title}</div>
      ))}
    </>
  );
};

export default Index;
